import React, {Component} from 'react';
import $ from 'jquery'
import  jQCloud from 'jqcloud2'
import  '../css/jqcloud.min.css'
import axios from 'axios'
import {getUrl}  from '../mixin'
export default class Cloude extends Component{
  constructor(props){
    super(props);
    this.state={  
        hotcluode:[
        ]
    }
  }
  componentDidMount(){
    let that=this
    let Id=getUrl()
    axios.get('/api/visualData/getHotKeywords?id='+Id).then(res=>{
      const  Data=res.data.data;
      let arr=[];
      let darr;
      Data.map((item,index)=>{
        darr=[];
        darr.push(item)
        darr.push(index)
        darr.push(111)
        return arr.push(darr)
      })
      this.setState({
        hotcluode:arr
      })
      setTimeout(function() {
        that._hot()
      }, 100);
    })

  }
  _hot(){
    var string_ = "";
    var data=this.state.hotcluode;
    for (var i = 0; i < data.length; i++) {
      var string_f = data[i][0];
      var string_n = data[i][1];
      string_ += "{text: '" + string_f + "', weight: '" + string_n + "',html: {'class': 'span_list'}},";
    }

    var string_list = string_;
    var word_list = eval("[" + string_list + "]");
      $(".my_favorite_latin_words").jQCloud(word_list);

    // $('.my_favorite_latin_words').on('mouseover','.span_list',function(e){ 
    //   var txt=e.target
    //   $(txt).css('transform','scale(1.2)')
    // })
    // $('.my_favorite_latin_words').on('mouseoout','.span_list',function(e){ 
    //   var txt=e.target
    //   $(txt).css('transform','scale(1)')
    // })
  
  }
  render(){
    var data=this.state.hotcluode
    return(
      <div>
        <div className="my_favorite_latin_words">
          {/* {
            data.map((v,k)=>{
              return(
                <span key={k} className="span_list">
                  {v}
                </span>
              )
            })
          } */}
        </div>
      </div>
    )
  }
}